<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">操作模块：</span>
                <el-cascader ref="cascaderRef" v-model="modules" :props="propCustom" :options="moduleArrs" clearable placeholder="请选择操作模块" />
            </div>
            <div class="task-one__item">
                <span class="task-one__label">操作账号：</span>
                <el-input placeholder="输入操作员账号/名称" v-model.trim="account" clearable></el-input>
            </div>

            <div class="task-one__item">
                <span class="task-one__label">操作平台：</span>
                <el-select v-model="plat_form" clearable placeholder="请选择操作平台">
                    <el-option label="平台" value="system" />
                    <el-option label="管理员" value="admin" />
                    <el-option label="员工" value="staff" />
                    <el-option label="供应商" value="supplier" />
                    <el-option label="供应商员工" value="supplier_staff" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">操作内容：</span>
                <el-input placeholder="输入操作内容" v-model.trim="so" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">日期范围：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <!-- <el-button @click="clickExport">导出</el-button> -->
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="log_id" label="ID" min-width="90"></el-table-column>
            <el-table-column prop="module_title" label="操作模块" min-width="130"></el-table-column>
            <el-table-column prop="plate_name" label="操作平台" min-width="120">
                <template #default="{ row }">
                    <p>{{ plat_form_label[row.plat_form] }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="plate_name" label="操作员" min-width="170">
                <template #default="{ row }">
                    <p>{{ row.op_name }}，{{ row.op_account }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作内容" min-width="460">
                <template #default="{ row }">
                    <el-popover placement="top-start" :content="row.content" :width="660" trigger="click">
                        <template #reference>
                            <p class="line-two">{{ row.content }}</p>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="操作时间" width="160"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, onBeforeUnmount } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getModule()
})

onBeforeUnmount(() => {
    cascaderRef.value = null
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const plat_form_label = {
    system: "平台",
    admin: "管理员",
    staff: "员工",
    supplier: "供应商",
    supplier_staff: "供应商员工",
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        plat_form: plat_form.value,
        so: so.value,
        account: account.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    let nodesRefs = cascaderRef.value.getCheckedNodes(false)
    if (Array.isArray(nodesRefs) && nodesRefs.length > 0) {
        let nodesRefsData = nodesRefs[0].data
        // 操作模板和操作模块值只能二选一
        if (nodesRefsData.module_val == "" && nodesRefsData.module) {
            params.module = nodesRefsData.module
        }
        if (nodesRefsData.module_val && nodesRefsData.parent_id > 0) {
            params.module_val = nodesRefsData.module_val
        }
    }
    getdata("sysLog/index", params)
}

/**
 * 搜索
 * @param {String} plat_form 操作平台
 * @param {String} account 操作账号/姓名
 * @param {String} so 操作内容
 * @param {String} area_time 注册时间段
 * @param {String} user_type 类型
 */
const plat_form = ref("")
const account = ref("")
const so = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 获取操作模板
const moduleArrs = ref([])
const modules = ref("") // 操作模块
const cascaderRef = ref(null)
const propCustom = {
    label: "module_title",
    value: "module",
}
function getModule() {
    proxy.$axios
        .get("sysLog/module")
        .then((res) => {
            switch (res.data.code) {
                case 0:
                    let result = res.data.data
                    result.map((item) => {
                        if (item.children && item.children.length > 0) {
                            item.children.unshift({
                                module: item.module,
                                module_val: "",
                                module_title: "全部",
                            })
                        } else {
                            item.children = []
                        }
                    })
                    moduleArrs.value = result
                    pubParams(getList)
                    break
                default:
                    proxy.$message({ message: res.data.msg, type: "error" })
                    break
            }
        })
        .catch((err) => {})
}

// 导出
// const clickExport = () => {
//     proxy.$axios
//         .get("", {
//             params: {
//                 tel: tel.value,
//                 s_time: area_time.value ? area_time.value[0] : "",
//                 l_time: area_time.value ? area_time.value[1] : "",
//             },
//             responseType: "blob",
//         })
//         .then(function (res) {
//             let contentDisposition = res.headers["content-disposition"]
//             let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
//             let blob = new Blob([res.data], { type: res.headers["content-type"] })
//             const url = window.URL.createObjectURL(blob)
//             const link = document.createElement("a")
//             link.href = url
//             link.download = filename
//             document.body.appendChild(link)
//             link.click()
//             URL.revokeObjectURL(url) // 释放内存
//             document.body.removeChild(link)
//         })
//         .catch((err) => {})
// }
</script>
<script>
export default {
    name: "OperationLog",
}
</script>

<style lang="less" scoped></style>
